<template>
  <div class="mod-config" style="margin-left: 15px;margin-top: 16px;">

    <el-form>
      <el-form-item>
        <el-button v-if="hasAuth('btn:dept:add')" type="primary" @click="addOrUpdateHandle()">新增</el-button>
      </el-form-item>
    </el-form>

    <el-table
      v-loading="listLoading"
      :data="dataList"
      row-key="id"
      border
      :tree-props="{ children: 'children' }"
      style="width: 99%;"
    >

      <el-table-column prop="name" header-align="center" align="center" label="部门名称" />

      <el-table-column prop="parentName" header-align="center" align="center" label="上级部门" />

      <el-table-column prop="sortValue" header-align="center" align="center" label="排序" />

      <el-table-column prop="leader" header-align="center" align="center" label="负责人" />

      <el-table-column prop="phone" header-align="center" align="center" label="电话" />

      <el-table-column prop="status" header-align="center" align="center" label="状态">
        <template slot-scope="scope">
          <el-switch
            v-model="scope.row.status"
            active-color="#13ce66"
            inactive-color="#ff4949"
            :active-value="1"
            :inactive-value="0"
            @change="activeOrInActiveById(scope.row)"
          />
        </template>
      </el-table-column>

      <el-table-column fixed="right" header-align="center" align="center" width="150" label="操作">
        <template slot-scope="scope">

          <el-button
            v-if="hasAuth('btn:dept:update')"
            type="primary"
            size="small"
            icon="el-icon-edit"
            title="编辑"
            @click="addOrUpdateHandle(scope.row.id)"
          />

          <el-button
            v-if="hasAuth('btn:dept:remove')"
            type="danger"
            size="small"
            icon="el-icon-delete"
            title="删除"
            @click="deleteHandle(scope.row.id)"
          />

        </template>
      </el-table-column>

    </el-table>

    <!-- 弹窗, 新增 / 修改 -->
    <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList" />
  </div>
</template>

<script>
import AddOrUpdate from './dept-add-or-update'
import api from '@/api/system/dept'
export default {
  components: {
    AddOrUpdate
  },
  data() {
    return {
      // 数据列表
      dataList: [],
      // 是否显示"等待数据显示"动画
      listLoading: false,
      // 是否显示添加或修改弹窗
      addOrUpdateVisible: false
    }
  },
  created() {
    this.getDataList()
  },
  methods: {
    // 获取数据列表
    getDataList() {
      this.listLoading = true
      api.getDataList().then(res => {
        this.dataList = res.data
        this.listLoading = false
      })
    },
    // 新增 / 修改
    addOrUpdateHandle(id) {
      this.addOrUpdateVisible = true
      this.$nextTick(() => {
        this.$refs.addOrUpdate.init(id)
      })
    },
    // 删除
    deleteHandle(id) {
      var ids = id ? [id] : this.dataListSelections.map(item => {
        return item.id
      })
      this.$confirm(`是否对 [角色id=${ids.join(',')}] 进行 [${id ? '删除' : '批量删除'}] 操作?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        api.deleteByIds(ids).then(res => {
          this.$message({
            message: res.msg,
            type: 'success',
            duration: 1500,
            onClose: () => {
              this.getDataList()
            }
          })
        })
      })
    },
    // 启用或禁用
    activeOrInActiveById(row) {
      api.enableOrDisable(row.id, row.status).then(res => {
        this.$message({
          type: 'success',
          message: res.msg
        })
      })
    }
  }
}
</script>

<style>

</style>
